<template>
  <div>
    <!-- 导航面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员权益</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>会员权益</h3>
    </el-card>
       
    <!-- 卡片视图 -->
    <el-card>
     <el-form :inline="true" class="demo-form-inline">
          <span>权益类型</span>
        <el-select v-model="findForm.type" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
       </el-select> 
       <span id="span1">权益名称</span>
      <el-form-item id="inp1">
        <el-input  v-model="findForm.name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item id="btn1">
        <el-button @click="find" type="primary" >查询</el-button>
        <el-button @click="resetForm('numberValidateForm')">重置</el-button>
      </el-form-item>
      </el-form>
    </el-card>

    
    <el-card id="box2">
        <span>权益列表</span>
        <div id="box3">
        <el-button  @click="pushnew"  type="primary" >+新建</el-button>
        <el-button @click="alldel">批量操作</el-button>
        </div>
     <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
     id="table1"
     @selection-change="batchId">
    
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 权益图标 -->
    <el-table-column
      
      label="权益图标"
      width="120"
      
      prop="img">
      <template slot-scope="scope"><img :src="scope.row.img" alt="" id="img1"></template>
    </el-table-column>
    <!-- 权益名称 -->
    <el-table-column
      prop="name"
      label="权益名称"
      width="120">
    </el-table-column>
    <!-- 权益类型 -->
    <el-table-column
      prop="type"
      label="权益类型"
      show-overflow-tooltip>
    </el-table-column>
    <!-- 权益说明 -->
    <el-table-column
      prop="description"
      label="权益说明"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      
      label="权益状态"
      show-overflow-tooltip prop="status">
       <template slot-scope="scope">
         <el-switch disabled v-model="scope.row.status" ></el-switch>
       </template>
    </el-table-column>
    <el-table-column
      prop="created"
      label="最后修改时间"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        
           <el-link @click="pushedit(scope.row)"  type="primary">编辑</el-link>
           <el-link @click="removeUser(scope.row.id)"  type="primary" id="editlink">删除</el-link>
      </template>
    </el-table-column>
  </el-table>
   <div class="block">
    
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
  </div>
    </el-card>
    
  </div>
</template>

<script>
export default {
    data() {
      return {
        options: [{
          value: '全部',
          label: '全部'
        }, {
          value: '自动标签',
          label: '系统自带'
        }, {
          value: '3',
          label: '自定义'
        }],
        findForm:{
            type:'',
            name:''

        },
        value: '',
        input:'',
        input8:'',
        value1:true,
        con:'',
        dialogVisible:false,
        page:1,
        size:5,
        count:0,
        id:'',
        ids:[],
        
        
        formData: {
        field101: true,
      },
         tableData: []
         
      }
     
      
    },
    methods:{
        handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
      },
      handleSizeChange(val) {
        
        this.size=val;
        
        this.getCon()
        
      },
      handleCurrentChange(val) {
        
        this.page=val;
        console.log(this.startIndex);
        
        this.getCon()
        
      },
      pushnew(){
        this.$router.push('/home/userRightsnew')
      },
      pushedit(editInfo){
        this.$store.commit("editInfo", editInfo);
        this.$router.push('/home/userRightsedit')
        
      },
      resetForm(){
          this.$refs.findForm.resetFields();
          this.getCon()
      },
      find(){
         this.$axios({
            url:'/vip/labels/list',
           
            params:{
              type:this.findForm.type,
              name:this.findForm.name,
              page:this.page,
              limit:this.size
            }
         }).then((res)=>{
           
           if(res.data.code==0){
             console.log(res);
             this.count=res.data.count;
             this.tableData=res.data.data;
             
             
           
             
           }
           
           
         })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      removeUser(id) {
        this.$confirm('确定删除此权益信息吗？, 是否继续?', '删除权益', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          if(res=='confirm'){
              this.$axios({
            url:'/vip/rights/delete',
            params:{
              id:id
          }
        }).then((res)=>{
           if(res.data.code==0){
             this.getCon()
           }
            
        })
          }
          
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      batchId(ids) {
      this.ids = [];
      for (let item of ids) {
        this.ids.push(item.id);
      }
    },
    alldel(){
        this.$confirm('确定删除此权益信息吗？, 是否继续?', '删除权益', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          if(res=='confirm'){
              this.$axios({
            url:'/vip/rights/deleteIds',
            params:{
              ids: this.ids.join(",")
          }
        }).then((res)=>{
           if(res.data.code==0){
             this.getCon()
           }
            
        })
          }
          
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
      getCon(){
         this.$axios({
            url:'/vip/rights/all',
            params:{
              page:this.page,
              limit:this.size
            }
         }).then((res)=>{
           
           
           this.tableData=res.data.data;
           this.count=res.data.count;
           
           
           for(let item of this.tableData){
             item.status==0?item.status=false:item.status=true
           }
           
           
           
         })
      }
      
    },
    
    mounted(){
      this.getCon()
      },
    
      
};
</script>

<style lang="less" scoped>
.el-tag {
  margin: 8px;
}

.borderTop {
  border-top: 1px solid #eee;
}

.borderBottom {
  border-bottom: 1px solid #eee;
}

.vcenter {
  display: flex;
  align-items: center;
}
.el-select{
    margin-left: 10px;
}
#span1{
    margin-left: 40px;
}
#inp1{
    margin-left: 20px;
}
#btn1{
    float: right;
}
  .el-row {
   
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fff;
    height: 30px;
  }
  #col1{
      margin-top: 20px;
  }
  #table{
      margin-top: 0;
  }
  #box2{
      margin-top: 20px;
  }
  #box3{
      float: right;
  }
  #editlink{
    margin-left: 10px;
  }
  #img1{
    height: 50px;
  }
</style>